cc.Class({
  name: 'cc.PeekCard',
  extends: cc.Component,
  properties: {
    pokerBottom: cc.Node,
    pokerMask: cc.Mask,
    bgMask: cc.Mask,
    bgNode: cc.Node,
    bgShadow: cc.Sprite,	// 阴影
    pokerShadow: cc.Sprite,
    pokerAtlas: cc.SpriteAtlas,
    spriteFrameList: [cc.SpriteFrame],	// 遮罩
    shadowSpriteFrameList: [cc.SpriteFrame],	// 横竖阴影
    _poker: null, //当前卡牌节点
    _direction: 0, //card滑动的方向，0表示不滑动，1表示上滑，-1表示下滑, 2表示右滑，-2表示左滑。
    _sensitive: 10, //灵敏度的阀值,默认为10
    _canFanPai: false,	// 是否达到翻牌的要求
    _isTouch: true,	// 是否开启触摸
    _isRollback: false,	// 是否回滚到了初始状态
    _isDone: false,	// 翻拍动作是否完成
    _startPos: null,
    _offPos: 0
  },
  init: function(pukeId) {
    for (var i = 0; i < this.pokerMask.node.childrenCount; i++) {
      var node = this.pokerMask.node.children[i];
      node.active = false;
      if (i > 0) {
        this.pokerMask.node.removeChild(node);
      }
    }

    if (this.poker) {
      this.poker.active = false;
    }

    this.bgNode.active = true;
    this._canFanPai = false;
    this._isDone = false;
    this._isTouch = true;
    
    this.pokerBottom.getChildByName('poker').getComponent(cc.Sprite).spriteFrame = this.pokerAtlas.getSpriteFrame(pukeId);

    var w = this.pokerBottom.width
    var h = this.pokerBottom.height
    this.nodeW = w;
    this.nodeH = h;

    this.pokerBottom.setPosition(0, h);
    this.pokerBottom.id = 'bottom';

    var parent = this.pokerBottom.parent;
    this.pokerLeft = cc.instantiate(this.pokerBottom);
    this.pokerLeft.parent = parent;
    this.pokerLeft.setPosition(-w, 0);
    this.pokerLeft.id = 'left';

    this.pokerRight = cc.instantiate(this.pokerBottom);
    this.pokerRight.parent = parent;
    this.pokerRight.getChildByName('poker').angle = -90;
    this.pokerRight.setPosition(w, 0);
    this.pokerRight.id = 'right';

    this.pokerTop = cc.instantiate(this.pokerBottom);
    this.pokerTop.parent = parent;
    this.pokerTop.getChildByName('poker').angle = -90;
    this.pokerTop.setPosition(0, -h);
    this.pokerTop.id = 'top';
  },
  // use this for initialization
  onLoad: function () {
    this.node.on(cc.Node.EventType.TOUCH_START, this.onStart, this)
    this.node.on(cc.Node.EventType.TOUCH_MOVE, this.onMove, this)
    this.node.on(cc.Node.EventType.TOUCH_END, this.onEnd, this)
    this.node.on(cc.Node.EventType.TOUCH_CANCEL, this.onCancel, this)
  },
  onStart: function (event) {
    this._isRollback = false
    this._direction = 0;//把方向状态改为0
    this._startPos = event.touch.getLocation()
  },
  hideOthers(id) {
    for (var i = 0; i < this.pokerMask.node.childrenCount; i++) {
      var node = this.pokerMask.node.children[i];
      if (node.id == id) continue;
      node.active = false;
    }
  },
  onMove: function (event) {
    if (this._isTouch == false) return	// 是否禁用触摸

    this._isRollback = false

    var pos = event.touch.getLocation()
    var y = pos.y - this._startPos.y
    var x = pos.x - this._startPos.x

    if (this._direction == 0) {
      if (pos.y - this._startPos.y > this._sensitive) {
        //上滑
        this._direction = 1;
        this.hideOthers('bottom');
        this.poker = this.pokerBottom;
        this.poker.setPosition(0, -this.nodeH);
      } else if (pos.y - this._startPos.y < -this._sensitive) {
        //下滑
        this._direction = -1;
        this.hideOthers('top');
        this.poker = this.pokerTop;
        this.poker.setPosition(0, this.nodeH);
      } else if (pos.x - this._startPos.x > this._sensitive) {
        //右滑
        this._direction = 2;
        this.hideOthers('left');
        this.poker = this.pokerLeft;
        this.poker.setPosition(-this.nodeW, 0);
      } else if (pos.x - this._startPos.x < -this._sensitive) {
        //左滑
        this._direction = -2;
        this.hideOthers('right');
        this.poker = this.pokerRight;
        this.poker.setPosition(this.nodeW, 0);
      } else {
        this.poker = null;
      }
    } 

    if (!this.poker) return;

    var mask = (Math.abs(this._direction) == 1) ? this.pokerMask.node.getPosition().y : this.pokerMask.node.getPosition().x
    var limit = (Math.abs(this._direction) == 1) ? 450 : 600
    if (Math.abs(mask) > limit) {
      this._canFanPai = true
      this.openAnimation()	// 达到指定位置，开牌
      return
    } else this._canFanPai = false

    if (Math.abs(this._direction) == 1) {
      this.updatePosition(y)
    } else {
      this.updatePosition(x)
    }

    this._startPos = pos
    this.poker.active = true;
  },

  onEnd: function (evt) {
    if (this._canFanPai == false) {	// 结束触摸事件时，如果没触发翻牌事件，则回滚到初始状态
      this._isRollback = (this.pokerMask.node.getPosition().y != 0 || this.pokerMask.node.getPosition().x != 0)	// 开启回滚定时器
    }
  },

  onCancel: function (evt) {
    if (this._canFanPai == false) {	// 结束触摸事件时，如果没触发翻牌事件，则回滚到初始状态
      this._isRollback = true	// 开启回滚定时器
    }
  },

  updatePosition: function (val) {
    if (!this.poker) return;
    this._offPos += val
    this._offPos = this._offPos < 0 ? 0 : this._offPos

    var mask = Math.abs(this._direction) == 1 ? this.pokerMask.node.getPosition().y : this.pokerMask.node.getPosition().x

    var ratio = this.getScaleRatio(mask)	// 缩放比例
    var opacity = this.getOpacity(mask)
    this.bgShadow.node.opacity = opacity
    this.pokerShadow.node.opacity = opacity

    if (Math.abs(mask) > 30) {
      if (Math.abs(this._direction) == 1) {
        this.pokerMask.spriteFrame = this.spriteFrameList[0]
        this.bgMask.spriteFrame = this.spriteFrameList[0]
      } else {
        this.pokerMask.spriteFrame = this.spriteFrameList[2]
        this.bgMask.spriteFrame = this.spriteFrameList[2]
      }
    } else {
      this.pokerMask.spriteFrame = this.spriteFrameList[1]
      this.bgMask.spriteFrame = this.spriteFrameList[1]
    }

    if (Math.abs(this._direction) == 1) {
      this.pokerMask.node.setScale(ratio, 1)
      this.pokerShadow.node.setScale(ratio, 1)

      if (this._direction > 0 ? this.pokerMask.node.getPosition().y < 0 : this.pokerMask.node.getPosition().y > 0) {
        this.pokerMask.node.y = 0
        this._isRollback = false
        if (this._isRollback) {
          this.poker.active = false;
        }
      } else {
        this.pokerMask.node.y += val
      }
      if (this._direction > 0 && this.poker.getPosition().y < -this.nodeH) {
        this.poker.y = -this.nodeH
      } else if (this._direction < 0 && this.poker.getPosition().y > this.nodeH) {
        this.poker.y = this.nodeH
      } else {
        this.poker.y += val
      }
      if (this._direction > 0 ? this.bgMask.node.getPosition().y < 0 : this.bgMask.node.getPosition().y > 0) {
        this.bgMask.node.y = 0
      } else {
        this.bgMask.node.y += val
      }

      if (this._direction > 0 ? this.bgNode.getPosition().y > 0 : this.bgNode.getPosition().y < 0) {
        this.bgNode.y = 0
      } else {
        this.bgNode.y -= val
      }

      if (this._direction > 0 ? this.bgShadow.node.getPosition().y < 0 : this.bgShadow.node.getPosition().y > 0) {
        this.bgShadow.node.y = 0
      } else {
        this.bgShadow.node.y += val * 1.6
      }

      if (this._direction > 0 ? this.pokerShadow.node.getPosition().y < 0 : this.pokerShadow.node.getPosition().y > 0) {
        this.pokerShadow.node.y = 0
      } else {
        this.pokerShadow.node.y += val
      }
    } else {
      this.pokerMask.node.setScale(1, ratio)
      this.pokerShadow.node.setScale(1, ratio)

      if (this._direction > 0 ? this.pokerMask.node.getPosition().x < 0 : this.pokerMask.node.getPosition().x > 0) {
        this.pokerMask.node.x = 0
        this._isRollback = false
        if (this._isRollback) {
          this.poker.active = false;
        }
      } else {
        this.pokerMask.node.x += val
      }

      if (this._direction > 0 && this.poker.getPosition().x < -this.nodeW) {
        this.poker.x = -this.nodeW
      } else if (this._direction < 0 && this.poker.getPosition().x > this.nodeW) {
        this.poker.x = this.nodeW
      } else {
        this.poker.x += val
      }

      if (this._direction > 0 ? this.bgMask.node.getPosition().x < 0 : this.bgMask.node.getPosition().x > 0) {
        this.bgMask.node.x = 0
      } else {
        this.bgMask.node.x += val
      }

      if (this._direction > 0 ? this.bgNode.getPosition().x > 0 : this.bgNode.getPosition().x < 0) {
        this.bgNode.x = 0
      } else {
        this.bgNode.x -= val
      }

      if (this._direction > 0 ? this.bgShadow.node.getPosition().x < 0 : this.bgShadow.node.getPosition().x > 0) {
        this.bgShadow.node.x = 0
      } else {
        this.bgShadow.node.x += val * 1.6
      }

      if (this._direction > 0 ? this.pokerShadow.node.getPosition().x < 0 : this.pokerShadow.node.getPosition().x > 0) {
        this.pokerShadow.node.x = 0
      } else {
        this.pokerShadow.node.x += val
      }
    }
  },

  getOpacity: function (pos) {
    if (this._direction > 0) {
      pos = pos < 0 ? 0 : pos
    } else {
      pos = pos > 0 ? 0 : pos
    }
    var w = (Math.abs(this._direction) == 1) ? this.nodeH : this.nodeW
    var temp = Math.abs((pos / w) * 255 * 2)
    temp = temp > 255 ? 255 : temp
    return temp
  },

  getScaleRatio: function (pos) {
    if (this._direction > 0) {
      pos = pos < 0 ? 0 : pos
    } else {
      pos = pos > 0 ? 0 : pos
    }
    var w = (Math.abs(this._direction) == 1) ? this.nodeH : this.nodeW
    var temp = Math.abs((pos / (w * 5)) + (this._direction>0?1:-1))

    temp = temp < 1 ? 1 : temp
    return temp
  },

  // 开牌动画
  openAnimation: function () {
    this._isTouch = false
    this._isDone = true
    this._canFanPai = true

    this.initPosition(0, 0)
    this.pokerMask.node.setScale(1.2)
    this.pokerMask.node.runAction(
      cc.sequence(
        cc.scaleTo(0.2, 1, 1).easing(cc.easeBackInOut(0.5)),
        cc.callFunc(() => {
          this.bgNode.active = false;
          // if (self.cardCellJS) self.cardCellJS.fadeInNum()
        }),
        cc.delayTime(1)
      )
    )
  },

  initPosition: function (x, y) {
    this.poker.setPosition(x, y)

    this.pokerMask.node.setPosition(0, 0)
    this.bgMask.node.setPosition(0, 0)
    this.bgNode.setPosition(0, 0)
    this.bgShadow.node.setPosition(0, 0)
    this.pokerShadow.node.setPosition(0, 0)

    this.poker.skewX = 0
    this.poker.skewY = 0
    this.poker.angle = 0
    this.bgShadow.node.opacity = 0
    this.pokerShadow.node.opacity = 0

    this.pokerMask.spriteFrame = this.spriteFrameList[1]
    this.bgMask.spriteFrame = this.spriteFrameList[1]
  },

  update: function (dt) {
    // 回滚到初始位置
    if (this._isRollback == true && this._isDone == false) {
      if (this._direction < 0) {
        this.updatePosition(20)
      } else {
        this.updatePosition(-20)
      }
    }
  },

  onSetNodeVisible: function (_isShow) {
    _isShow = (_isShow == null || _isShow == undefined) ? false : _isShow
    this.node.active = _isShow
  }
})
